<!--
 * @Descripttion: 商品详情
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-17 20:26:23
 * @LastEditors  : cxguo
 * @LastEditTime : 2019-12-22 18:39:51
 -->
<template>
  <div>
    <el-form ref="form" class="form-lit5-bottom" :model="searchData" label-width="100px" size="mini">
      <el-row>
        <el-col :span="6">
          <el-form-item label="单据编号:" prop="billNo">
            <el-input v-model="searchData.billNo" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="商品名称:" prop="goodsNamestr">
            <el-input v-model="searchData.goodsNamestr" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="供应商名称:" prop="supplierName">
            <el-input v-model="searchData.supplierName" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="审核状态:" prop="contact">
            <el-select
              v-model="searchData.auditStatus"
              clearable
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in optionsData.auditStatus"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="业务日期:" prop="businessTime">
            <el-date-picker
              v-model="searchData.businessTime"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="制单日期:" prop="createTime">
            <el-date-picker
              v-model="searchData.createTime"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="经手人:" prop="handUserId">
            <el-select
              v-model="searchData.handUserId"
              clearable
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in optionsData.auditStatus"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="制单人:" prop="createUserId">
            <el-select
              v-model="searchData.handUserId"
              clearable
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in optionsData.auditStatus"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="单据上传状态:" prop="auditStatus">
            <el-select
              v-model="searchData.handUserId"
              clearable
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in optionsData.auditStatus"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { oftenuse } from '@/libs/mixins'

export default {
  name: 'SearchFilter',
  mixins: [oftenuse],
  props: {
  },
  data() {
    return {
      searchData: {},
      optionsData: {
        employee: [],
        auditStatus: [
          { value: '0', label: '未审核' },
          { value: '1', label: '已审核' }]
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  methods: {
    clearData() {
      this.searchData = {}
    }
  }
}
</script>
